<template>
	<view>
		<view class="top-fixed-project-list">
			<!-- 搜索框 -->
			<Topsearch :showCate='false' :showFocus="showFocus" :searchKeyWord="searchKeyWord" :currentCateIndex="cateIndex"
			 @currentCateClick='changeCateIndex' @searchEvent="searchDetail" @searchClear='searchDetail' />
			<view class="re-filter-contain">

				<view class="re-filter-contain-left">
					<LiFilter @change="change" @select="select" ref="refLiFilter" :datalist="datalist" :height="height" :mineChecked="mineChecked" @clearSelectFun='clearSelectFun' :clearSelect='clearSelect'>
					</LiFilter>
					<view @click="show('right')" class="search-cate-text l last-item" :class="clearSelect?'active':''">
						筛选<text class="icon iconfont iconxiala"></text>
					</view>
				</view>

				<view @click="resetList()" class="search-cate-text last-item">
					<!-- <text class="icon iconfont iconchongzhi"></text> -->
					<image src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/clear.png" mode="widthFix"></image>
					重置
				</view>

			</view>
		</view>
		<!-- 搜索结果 -->
		<view v-if="searchProjectList.length>0" class="search-result">
			<ProjectItem ref='ProjectItem' :projectList="searchProjectList"></ProjectItem>
		</view>
		<view class="sysBottomShow" v-if="isShowBottom&&searchProjectList.length>2">
			我是有底线的
		</view>

		<!-- 无数据为您推荐 -->
		<view v-if="nodata">
			<view class="search-result">
				<view class="sysNodata">
					<image src="../../static/nomorepro.png" mode=""></image>
					<view class="sysNodataTitle">
						暂无相关数据
					</view>
				</view>
				<view class="recomm-contain">
					<view class="sysForYou">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/pro_for_you.png"></image>
					</view>
					<view class="recommend-search-contain">
						<ProjectItem ref='ProjectItem' :projectList="searchRecommendProjectList"></ProjectItem>
					</view>
				</view>

			</view>
			<view class="sysBottomShow">
				已加载今日全部推荐
			</view>
		</view>

		<view class="example-body">
			<uni-drawer ref="drawerRef" :width="drawWidth" :visible="showRight" mode="right" @change="drawChange" @close="closeDrawer('right')">
				<view class="pro-want">
					<view class="pro-want-contain-title">
						项目诉求
					</view>
					<view class="pro-want-contain">
						<block v-for="(item,index) in wantType" :key="index">
							<view @click="clickWant" :data-want="item" :class="[drawWant[0]==item?'pro-want-item-active':'pro-want-item']">
								{{item}}
							</view>
						</block>
					</view>
				</view>
				<view class="pro-want">
					<view class="pro-want-contain-title">
						当前阶段
					</view>
					<view class="pro-want-contain">
						<block v-for="(item,index) in processType" :key="index">
							<view @click="clickProcess" :data-process="item" :class="[drawProcess.length>0&&drawProcess[0].code==item.code?'pro-want-item-active':'pro-want-item']">
								{{item.value}}
							</view>
						</block>
					</view>
				</view>
				<view class="pro-want">
					<view class="pro-want-contain-title">
						融资阶段
					</view>
					<view class="pro-want-contain">
						<block v-for="(item,index) in financialType" :key="index">
							<view @click="clickFina" :data-fina="item" :class="[drawFina.length>0&&drawFina[0].code==item.code?'pro-want-item-active':'pro-want-item']">
								{{item.value}}
							</view>
						</block>
					</view>
				</view>
				<view class="draw-option">
					<view @click="resetDraw" class="draw-option-reset">
						重置
					</view>
					<view @click="drawConfirm" class="draw-option-close">
						确定
					</view>
				</view>
			</uni-drawer>
		</view>
		<view class="totop" @click="top" :style="{'display':(flag===true? 'block':'none')}">
			<uni-icons type="arrowthinup" size="24" color="#444444" style="font-weight: bold;"></uni-icons>
		</view>
	</view>
</template>

<script>
	import Topsearch from '@/components/top-search-tab.vue'
	import ProjectItem from '@/components/page-componnet/project-item.vue'
	import LiFilter from '@/components/Li-Filter/Li-Filter.vue'
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue";
	import searchCondition from '@/utils/search_condition.js';
	export default {
		data() {
			return {
				showFocus: false,
				cateIndex: 0,
				searchProjectList: [], //默认length不为0首次加载不显示无数据
				searchProjectLength: 1,
				pageProjectSize: 20,
				pageProjectNum: 1,
				searchKeyWord: '',
				height: 0.6,
				mineChecked: false,
				datalist: {
					filterType: 1,
					data: [
						// {
						// 	title: '综合', //排序头的名称
						// 	value: 'a',
						// 	type: 1, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
						// 	data: []
						// },
						{
							title: '全国', //排序头的名称
							value: 'b',
							type: 2, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
							data: []
						},
						{
							title: '技术领域', //排序头的名称
							value: 'c',
							type: 2, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
							data: []
						},
					]
				},
				filterIsShow: false,
				projectType: [],
				showRight: false,
				drawWidth: uni.upx2px(575),
				financialType: [],
				processType: [],
				wantType: ['全部', '项目融资', '项目落地', '技术交易', '招人才', '其他'],
				drawWant: [],
				copyDrawWant: [],
				drawProcess: [],
				copyDrawProcess: [],
				drawFina: [],
				copyDrawFina: [],
				isDrawConfirmFlag: false,
				isShowBottom: false,
				searchRecommendProjectList: [],
				techFiled: [],
				provinceId: '',
				cityId: '',
				sort: null,
				nodata: false,
				flag: false,
				clearSelect:false
			}
		},
		components: {
			Topsearch,
			ProjectItem,
			LiFilter,
			uniDrawer
		},

		methods: {
			clearSelectFun(v){
				this.clearSelect = v
			},
			//查询推荐
			//获取优选推荐的数据
			getRecommendList() {
				this.$request.post({
					url: 'projectInfo/pageQueryList.json',
					data: {
						pageSize: 5,
						pageIndex: 1,
					},
				}).then(res => {
					let array = res.data;
					this.searchRecommendProjectList = array.length > 5 ? array.slice(0, 5) : array;
				});
			},
			searchDetail(data) {
				this.searchKeyWord = data.keyWord;
				this.pageProjectNum = 1;
				this.isShowBottom = false;
				this.searchProjectList = [];
				// this.top()
				// this.searchProject();
				this.searchProjectByKeyword();
			},
			//条件搜索
			searchProjectByKeyword() {
				uni.showLoading({
					title: '加载中'
				});
				const conditions = searchCondition.composeCondition(this.searchKeyWord);
				this.$request.post({
					url: 'projectInfo/pageQueryList.json',
					data: {
						pageSize: this.pageProjectSize,
						pageIndex: this.pageProjectNum,
						...conditions,
						provinceId: this.provinceId,
						cityId: this.cityId,
						sort: this.sort
					},
				}).then(res => {
					uni.hideLoading();
					let array = res.data;
					if (this.pageProjectNum === 1) {
						this.searchProjectList = [];

					}
					if (res.count == 0) {
						this.nodata = true
					} else {
						this.nodata = false
					}
					for (let i = 0; i < array.length; i++) {
						this.searchProjectList.push(array[i])
					}
					if (this.pageProjectSize * this.pageProjectNum >= res.count) {
						this.isShowBottom = true;
					}
					if (this.pageProjectNum === 1 && this.searchProjectList.length === 0) {
						this.getRecommendList()
					}
					uni.stopPullDownRefresh();
				});
			},
			changeCateIndex(data) {
				this.cateIndex = data
			},
			change(e) {
				// if(e.data.optionType==1){
				// 	this.getCity(e.data.regionId,e.clickIndex);
				// }
			},
			select(e) {
				let nodes = e.nodes;

				if (e.root.value === 'b') {
					if (nodes.length > 0 && nodes[0].text === "全部") {
						this.techFiled = []
					} else if (nodes.length > 1 && nodes[1].text === "全部") {
						this.techFiled = [nodes[0].value]
					} else if (nodes.length > 1 && nodes[1].text !== "全部") {
						this.techFiled = [nodes[1].value]
					}
				}
				if (e.root.value === 'c') {
					if (nodes.length > 0 && nodes[0].text === "全国") {
						this.provinceId = '';
						this.cityId = '';
					} else {
						this.provinceId = e.nodes[0].value;
						this.cityId = e.nodes[1].value;
					}

				}
				if (e.root.value === 'a') {
					if (e.data.text == '综合') {
						this.sort = null
					}
					if (e.data.text == '最新') {
						this.sort = "desc";
					}
				}
				this.searchProject();
				this.mineChecked = true;
				// this.techFiled = e.nodes;
			},
			resetList() {
				this.searchKeyWord = '';
				this.pageProjectNum = 1;
				this.drawWant = [];
				this.copyDrawFina=[];
				this.copyDrawProcess=[];
				this.copyDrawWant=[];
				this.drawProcess = [];
				this.drawFina = [];
				this.techFiled = [];
				this.provinceId = '';
				this.cityId = '';
				this.sort = null;
				this.mineChecked = false;
				this.clearSelect = false;
				this.searchProject();

				this.$refs.refLiFilter.setTitle();
			},
			//查询项目技术
			searchProject() {
				// uni.showNavigationBarLoading();
				uni.showLoading({
					title: '加载中'
				});
				let yourWant;
				if (this.drawWant[0] === '全部') {
					yourWant = null;
				} else {
					yourWant = this.drawWant.length == 0 ? null : (['"' + this.drawWant[0] + '"']);
				}
				let processType;
				if (this.drawProcess.length > 0 && this.drawProcess[0].value === '全部') {
					processType = null;
				} else {
					processType = this.drawProcess.length == 0 ? null : [this.drawProcess[0].code];
				}
				let financingType;
				if (this.drawFina.length > 0 && this.drawFina[0].value === '全部') {
					financingType = null;
				} else {
					financingType = this.drawFina.length == 0 ? null : [this.drawFina[0].code];
				}
				this.$request.post({
					url: 'projectInfo/pageQueryList.json',
					data: {
						pageSize: this.pageProjectSize,
						pageIndex: this.pageProjectNum,
						keyWord: this.searchKeyWord,
						yourWant,
						processType, //: this.drawProcess
						financingType, //:this.drawFina  ['"' + this.techFiled[0] + '"']
						skillArea: this.techFiled.length === 0 ? null : [this.techFiled[0] - 0],
						provinceId: this.provinceId,
						cityId: this.cityId,
						sort: this.sort
					},
				}).then(res => {
					uni.hideLoading();
					let array = res.data;
					if (this.pageProjectNum === 1) {
						this.searchProjectList = [];
					}
					if (res.count == 0) {
						this.nodata = true
					} else {
						this.nodata = false
					}
					for (let i = 0; i < array.length; i++) {
						this.searchProjectList.push(array[i])
					}
					if (this.pageProjectSize * this.pageProjectNum >= res.count) {
						this.isShowBottom = true;
					}
					if (this.pageProjectNum === 1 && this.searchProjectList.length === 0) {
						this.getRecommendList()
					}
					uni.stopPullDownRefresh();
				});

			},
			//根据省份获取所在市
			getCity(provinceId, index) {
				this.$request.get({
					url: 'region/queryCityByProvinceId.json',
					data: {
						provinceId
					},
				}).then(res => {
					for (let i = 0; i < res.length; i++) {
						res[i].value = res[i].regionId;
						res[i].text = res[i].name;
					}
					this.$set(this.datalist.data[0].data[index], 'children', res)
				})
			},
			//获取所有的省份
			getAllProvince() {
				this.$request.get({
					url: 'region/queryAllProvinces.json',
					data: {},
				}).then(res => {
					for (let i = 0; i < res.length; i++) {
						res[i].value = res[i].regionId;
						res[i].text = res[i].name;
						res[i].optionType = 1;
					}
					let list0 = {
						text: '全国',
						value: '全国'
					};
					res.unshift(list0);
					let AreaItem = {
						title: '全国', //排序头的名称
						value: 'c',
						type: 2, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
						data: res
					};

					this.datalist.data.splice(0, 1, AreaItem);
				})
			},
			// 获取项目筛选条件
			getProjectType() {
				this.$request.get({
					url: 'dict/getTreeByType?type=skill_area',
					data: {
						type: 'skill_area'
					},
				}).then(res => {
					let projectTypeList = res.children;

					let list0 = {
						text: '全部',
						value: '全部'
					};
					for (let i = 0; i < projectTypeList.length; i++) {
						projectTypeList[i].text = projectTypeList[i].value;
						projectTypeList[i].value = projectTypeList[i].code;
						if (projectTypeList[i].children.length > 0) {
							for (let j = 0; j < projectTypeList[i].children.length; j++) {
								projectTypeList[i].children[j].text = projectTypeList[i].children[j].value;
								projectTypeList[i].children[j].value = projectTypeList[i].children[j].code;
							}
							let list0 = {
								text: '全部',
								value: '全部'
							};
							projectTypeList[i].children.unshift(list0);
						}
					}
					projectTypeList.unshift(list0);
					let tempdata = {
						filterType: 1,
						data: []
					};
					let normalItem = {
						title: '综合', //排序头的名称
						value: 'a',
						type: 1, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
						data: [{
								value: 1,
								text: '综合'
							},
							{
								value: 2,
								text: '最新'
							}
						]
					};
					let projectItem = {
						title: '技术领域', //排序头的名称
						value: 'b',
						type: 2, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
						data: projectTypeList
					};
					let AreaItem = {
						title: '全国', //排序头的名称
						value: 'c',
						type: 2, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
						data: []
					};
					// tempdata.data[0] = normalItem;

					tempdata.data[0] = AreaItem;
					tempdata.data[1] = projectItem;
					// this.datalist = tempdata;
					// this.datalist.data[0] = normalItem;
					this.datalist.data[1] = projectItem;
				});
			},
			//获取当前阶段检索条件
			getNowProcess() {
				this.$request.get({
					url: 'dict/getTreeByType?type=process_type',
					data: {
						type: 'process_type'
					},
				}).then(res => {
					let obj = {
						value: '全部',
						code: ''
					}
					this.processType = res.children;
					this.processType.unshift(obj)
				})
			},
			//获取融资类型检索条件
			getNowFina() {
				this.$request.get({
					url: 'dict/getTreeByType?type=financial_type',
					data: {
						type: 'financial_type'
					},
				}).then(res => {
					let obj = {
						value: '全部',
						code: ''
					}
					this.financialType = res.children;
					this.financialType.unshift(obj)
				})
			},
			show(e) {
				this.clearSelectFun(true)
				this.$refs.refLiFilter.hideDialog()
				if (e === 'left') {
					this.showLeft = true
				} else {
					this.showRight = true;
					this.isDrawConfirmFlag = false;
					this.drawFina = JSON.parse(JSON.stringify(this.copyDrawFina));
					this.drawProcess = JSON.parse(JSON.stringify(this.copyDrawProcess));
					this.drawWant = JSON.parse(JSON.stringify(this.copyDrawWant));
					this.$refs.drawerRef.open();
				}
			},
			hide() {
				this.showLeft = false
				this.showRight = false
			},
			closeDrawer(e) {
				if (e === 'left') {
					this.showLeft = false
				} else {
					this.showRight = false
				}
			},
			confirm() {},
			//抽屉点击事件
			clickWant(e) {
				this.drawWant.splice(0, this.drawWant.length);
				this.drawWant.push(e.currentTarget.dataset.want);
				// drawWant:[],
				// drawProcess:[],
				// drawFina:[],
			},

			clickProcess(e) {
				this.drawProcess.splice(0, this.drawProcess.length);
				if (e.currentTarget.dataset.process === "全部") {
					return false
				}
				this.drawProcess.push(e.currentTarget.dataset.process);
			},
			clickFina(e) {
				this.drawFina.splice(0, this.drawFina.length);
				this.drawFina.push(e.currentTarget.dataset.fina);
			},
			//抽屉重置事件
			resetDraw() {
				this.drawWant.splice(0, this.drawWant.length);
				this.drawProcess.splice(0, this.drawProcess.length);
				this.drawFina.splice(0, this.drawFina.length);
			},
			//抽屉确认事件
			drawConfirm() {
				this.isDrawConfirmFlag = true;
				this.pageProjectNum = 1;
				this.searchProjectList = [];
				// this.top()
				this.searchProject();
				this.$refs.drawerRef.close();
			},
			//draw改变事件
			drawChange(flag) {
				if (this.isDrawConfirmFlag && !flag) {
					this.copyDrawFina = JSON.parse(JSON.stringify(this.drawFina));
					this.copyDrawProcess = JSON.parse(JSON.stringify(this.drawProcess));
					this.copyDrawWant = JSON.parse(JSON.stringify(this.drawWant));
				}
				if (!this.isDrawConfirmFlag && !flag) {
					this.drawFina = JSON.parse(JSON.stringify(this.copyDrawFina));
					this.drawProcess = JSON.parse(JSON.stringify(this.copyDrawProcess));
					this.drawWant = JSON.parse(JSON.stringify(this.copyDrawWant));
					// this.resetDraw();
				}
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
					this.flag = true
				} else { //当距离小于600时显示回到顶部按钮
					this.flag = false
				}
			},
			top() { //回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},

		},
		onNavigationBarButtonTap(e) {
			this.showRight = !this.showRight
		},
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.hide()
				return true
			}
		},
		onPullDownRefresh: function() {
			this.pageProjectNum = 1;
			this.isShowBottom = false;
			this.nodata = false;

			this.searchProject();
		},

		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			if (!this.isShowBottom) {
				this.pageProjectNum += 1;
				this.searchProject()
			}

		},
		onLoad(option) {
			this.getProjectType();
			this.getAllProvince();
			this.getNowProcess();
			this.getNowFina();
			this.searchProject()
			searchCondition.loadProject();
		},
		onHide() {
			this.$refs.ProjectItem.resetOpcity()

		}
	}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
		min-height: 100vh;
	}

	.top-fixed-project-list {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.search-cate-text {
		display: flex;
		align-items: center;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A3A3A3;
		padding-right: 30upx;
		padding-left: 10upx;
		/* margin-right: 46upx; */
		/* position: absolute;
			top: 12upx;
			right: 30upx;
			z-index: 4 */
	}

	.search-cate-text.l {
		color: rgba(121, 121, 121, 1);
		padding-right: 0upx;
		padding-left: 10upx;
		font-size: 28upx;
		display: flex;
		align-items: center;
	}
	.search-cate-text.l.active{
		color: #2A7DFA;

	}

	.search-cate-text image {
		width: 24upx;
		height: 24upx;
		margin-right: 10upx;
	}


	.self-search-cate-text {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin-right: 38upx;
		color: rgba(121, 121, 121, 1);
	}

	.self-search-cate-text>.icon {
		margin-left: 7upx;
		vertical-align: middle;
	}

	.last-item {
		margin-right: 0upx;
	}

	.search-cate-text>.icon {
		margin-left: 7upx;
		vertical-align: middle;
	}

	.self-search-contain .self-filter-contain {
		display: flex;
		justify-content: space-between;
		padding: 0upx 30upx;
		position: relative;
		/* border: 1px solid #007AFF; */
	}

	.re-filter-contain {
		/* display: flex;
		justify-content: space-between; */
		height: 82rpx;
		position: relative;
		/* padding-top: 12upx;
		padding-bottom: 12upx; */
		border-bottom: 1upx solid #F2F2F2;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		/* padding: 0upx 30upx; */
	}

	.re-search-cate-text {}

	.re-filter-contain-left {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.self-search-contain .filter-contain-left {
		display: flex;
	}

	.self-filter-contain-left {
		display: flex;
	}

	.search-result {
		padding-top: 180rpx;
		border-top: 1upx solid #F2F2F2;
		background-color: #fff;
	}

	.pro-want-item {
		background: rgba(245, 245, 245, 1);
		border-radius: 10upx;
		padding: 14upx 27upx;
		font-size: 26upx;
		margin-right: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(74, 74, 74, 1);
		margin-bottom: 24upx;
		box-sizing: border-box;
	}

	.pro-want-item-active {
		background: rgba(243, 247, 255, 1);
		border-radius: 10upx;
		border: 2upx solid rgba(42, 125, 250, 1);
		padding: 12upx 25upx;
		font-size: 26upx;
		margin-right: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2A7DFA;
		margin-bottom: 24upx;
		box-sizing: border-box;
	}

	.pro-want {
		margin: 62upx 23upx 0upx 23upx;
	}

	.pro-want-contain {
		display: flex;
		/* justify-content: space-between; */
		flex-wrap: wrap;

	}

	.pro-want-contain-title {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(74, 74, 74, 1);
		margin-bottom: 21upx;
	}

	.draw-option {
		width: 100%;
		display: flex;
		height: 87upx;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.draw-option-reset {
		width: 50%;
		font-size: 30upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(133, 133, 133, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1upx solid #E0E0E0;
	}

	.draw-option-close {
		width: 50%;
		background: rgba(42, 125, 250, 1);
		font-size: 30upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		/* border-top: 1upx solid #E0E0E0; */
	}

	.no-more-project {
		width: 100%;
	}

	.recomm-contain-top {
		display: flex;
		align-items: center;
		padding: 0 30upx;
	}

	.recomm-contain-top-line {
		height: 1upx;
		width: 239upx;
		border: 1upx solid #EBEBEB;
	}

	.recomm-contain-top-text-search {
		margin: 0 43upx;
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(51, 51, 51, 1);
	}

	.bottom-text {
		text-align: center;
		font-size: 26upx;
		font-weight: 400;
		color: rgba(163, 163, 163, 1);
		margin: 16upx;
	}

	.totop {
		width: 88upx;
		height: 88upx;
		box-shadow: 0px 4upx 8upx 0upx rgba(0, 0, 0, 0.04);
		border: 2upx solid rgba(235, 235, 235, 1);
		position: fixed;
		right: 20upx;
		bottom: 56upx;
		background-color: #FFFFFF;
		border-radius: 50%;
		line-height: 88upx;
		text-align: center;
	}
</style>
